<template>
  <div id="app">
    <!-- <expression-hello /> -->
    <!-- <condition-hello /> -->
    <!-- <event-hello /> -->
    <!-- <list-hello /> -->
    <!-- <list-enhance /> -->
    <!-- <my-input /> -->
    <!-- <my-auto-input /> -->
    <!-- <todo-list /> -->
    <!-- <switch-btn /> -->
    <!-- <my-table /> -->
    <!-- <my-reverse /> -->
    <!-- <mirror-reverse /> -->
    <!-- <collapse /> -->
    <!-- <my-checkbox /> -->
    <!-- <tabs /> -->
    <!-- <tags /> -->
    <!-- <xiushifu /> -->
    <!-- <rate /> -->
    <collapse1 />
    <!-- {{ reverse1(msg) }} -->
    <!-- <brand-manager /> -->
    <!-- <watcher /> -->
    <!-- <buy-books /> -->
    <!-- <selected-elements /> -->
    <!-- <selected-elements :count="counter" />
    <button @click="counter++">+1</button> -->
    <!-- <parent /> -->
    <!-- <my-product
      v-for="(item, i) in list"
      :key="i"
      :title="item.proname"
      :price="item.proprice"
      :intro="item.intro"
      :index="i"
    />
    <list :arr="list" /> -->
    <!-- <bro-a />
    <bro-b /> -->
    <!-- <todo-header />
    <todo-main />
    <todo-footer /> -->
    <!-- <life-cycle v-if="visible" />
    <button @click="visible = !visible">杀</button> -->
    <!-- <get-req /> -->
    <!-- <my-ref /> -->
    <!-- <dynamic-component /> -->
  </div>
</template>

<script>
import ExpressionHello from './components/差值表达式.vue';
import ConditionHello from './components/条件渲染.vue';
import EventHello from './components/绑定事件.vue';
import ListHello from './components/列表渲染.vue';
import ListEnhance from './components/列表渲染初级进阶.vue';
import MyInput from './components/输入框手动双向绑定.vue';
import MyAutoInput from './components/输入框自动双向绑定.vue';
import TodoList from './components/todolist.vue';
import SwitchBtn from './components/switch开关.vue';
import MyTable from './components/表格.vue';
import MyReverse from './components/反转.vue';
import MirrorReverse from './components/镜像反转.vue';
import Collapse from './components/collapse折叠面板.vue';
import MyCheckbox from './components/复选框们.vue';
import Tabs from './components/tabs切换.vue';
import Tags from './components/tags标签.vue';
import Xiushifu from './components/修饰符.vue';
import Rate from './components/rate评分.vue';
import Collapse1 from './components/collapse手风琴.vue';
import BrandManager from './components/品牌管理.vue';
import Watcher from './components/watch监听器.vue';
import BuyBooks from './components/买书.vue';
// import SelectedElements from './components/选中的元素和.vue';
// import Parent from './components/父子组件传参_父.vue';
import MyProduct from './components/MyProduct.vue';
import List from './components/List.vue';
import BroA from './components/任意组件通信_a.vue';
import BroB from './components/任意组件通信_b.vue';
import TodoHeader from './components/todo-header.vue';
import TodoMain from './components/todo-main.vue';
import TodoFooter from './components/todo-footer.vue';
import LifeCycle from './components/生命周期.vue';
import GetReq from './components/get请求.vue';
import MyRef from './components/ref.vue';
import DynamicComponent from './components/动态组件.vue';

export default {
  name: 'App',

  // 放组件的地方
  components: {
    ExpressionHello,
    ConditionHello,
    EventHello,
    ListHello,
    ListEnhance,
    MyInput,
    MyAutoInput,
    TodoList,
    SwitchBtn,
    MyTable,
    MyReverse,
    MirrorReverse,
    Collapse,
    MyCheckbox,
    Tabs,
    Tags,
    Xiushifu,
    Rate,
    Collapse1,
    BrandManager,
    Watcher,
    BuyBooks,
    // SelectedElements,
    // Parent,
    MyProduct,
    List,
    BroA,
    BroB,
    TodoHeader,
    TodoMain,
    TodoFooter,
    LifeCycle,
    GetReq,
    MyRef,
    DynamicComponent,
  },

  // 放数据的地方
  data () {
    return {
      counter: 5,
      msg: 'hello world',
      visible: true,
      list: [
        {
          proname: 'aaaaaa',
          proprice: 123,
          intro: 'hello world',
        },
        {
          proname: 'aaasadsadaaa',
          proprice: 123,
          intro: 'hello world',
        },
        {
          proname: 'aa123123aaaa',
          proprice: 123,
          intro: 'hello world',
        },
      ],
    };
  },

  computed: {
    msg1 () {
      return this.msg.split('').reverse().join('');
    },
  },

  // 放函数的地方
  // methods: {
  //   reverse1 (str) {
  //     return str.split('').reverse().join('');
  //   },
  // },

  // 组件中的过滤器
  // filters: {
  //   reverse (str) {
  //     return str.split('').reverse().join('');
  //   },
  // },

}
</script>
